<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckeditor/ckeditor.js"></script> 
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckfinder/ckfinder.js"></script>  
<link href="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/js/jquery-ui.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.slug.js"></script>
 <!-- Bootstrap -->
	
    <script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.tmpl.min.js"></script>
  
    <script src="{{$LAYOUT_HELPER_URL}}admin/js/bootstrap.file-input.js"></script>
	<script src="{{$LAYOUT_HELPER_URL}}admin/js/init.js"></script>
	
	    <link href="{{$LAYOUT_HELPER_URL}}admin/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="{{$LAYOUT_HELPER_URL}}admin/css/style2.css" rel="stylesheet" />
    <!--                       CSS                       -->

    <link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/reset.css"  type="text/css"  />
  
    <link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/style.css" type="text/css" />
    
    <link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/invalid.css"  type="text/css" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-1.9.1.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui.js"></script>


<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/multiSelect.css" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />

<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.multiselect.js"></script>
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.multiselect.filter.js"></script>

<style>
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
     */
    * html .ui-autocomplete {
        height: 100px;
        width:450px;
    }
</style>
 <style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
 <script>

</script>

<script type="text/javascript">
var allChaps = [];
// unchange
					var htmlList = "<optgroup label='sort'>";
					
					{{foreach from=$allCats item=item}}
					


                      htmlList = htmlList + '<option  value="' + "{{$item.product_id}}" + '" >' + "{{$item.title}}" + '</option>';
                    {{/foreach}}
					htmlList = htmlList + '</optgroup>'
					 + "<optgroup label='list'>";
					{{foreach from=$allCats item=item}}
                      htmlList = htmlList + '<option  value="' + "{{$item.product_id}}" + '" >' + "{{$item.title}}" + '</option>';
                    {{/foreach}}
					htmlList = htmlList + '</optgroup>';
					
		
					
// tam
function split( val ) {
    return val.split( /,\s*/ );
}
function extractLast( term ) {
    return split( term ).pop();
}					
function showMenu() {
    $("#unit").autocomplete( "search" , '' );
}
function submitBook()
{
    $('b.name_chap').each(function(){
        var name = $(this).text();
        allChaps.push(name);
    });
    $('input.chapter_titles').val(allChaps);
    $('#submitFormQuestion').submit();
	
}


jQuery(document).ready(function (){ 
 
 
	
      $( "#accordion" ).accordion({header: "> div > h3"}).sortable({
															axis: "y",
															handle: "h3",
															stop: function( event, ui ) {
															// IE doesn't register the blur when sorting
															// so trigger focusout handlers to remove .ui-state-focus
															ui.item.children( "h3" ).triggerHandler( "focusout" );
															}
														});  	 
 	    var availableUnit = new Array();
  	       
  	      {{foreach from=$allChapters item=item key=k}}
  	      availableUnit[{{$k}}] = "{{$item.name}}";
  	       {{/foreach}}                 
 	        $( "#unit" )
 	            // don't navigate away from the field on tab when selecting an item
 	            .bind( "keydown", function( event ) {
 	                if ( event.keyCode === $.ui.keyCode.TAB &&
 	                        $( this ).data( "autocomplete" ).menu.active ) {
 	                    event.preventDefault();
 	                }
 	            })
 	            .autocomplete({
 	                minLength: 0,
 	                source: function( request, response ) {
 	                    // delegate back to autocomplete, but extract the last term
 	                    response( $.ui.autocomplete.filter(
 	                            availableUnit, extractLast( request.term ) ) );
 	                },
 	                focus: function() {
 	                    // prevent value inserted on focus
 	                    return false;
 	                },
 	                
 	            });   

  	       

  	 $("select").multiselect().multiselectfilter(); 	    	
        
    });
    
  function addChap()
  {
  		var chap = $('input#unit').val();
  		var html = "<p>"+ chap + "</p>";
		//allChaps.push(chap);
  		var t = $('select[name=data_question]').html();
		
		var newPanel='<div class="group"><h3><b class="name_chap">'+chap + '</b><span style="float:right" onclick="removeChap($(this))" class="ui-icon ui-icon-closethick"></span></h3><div></div></div>';
				
					
		$('#accordion').append(newPanel).accordion('destroy').accordion({header: "> div > h3"}).sortable({
																axis: "y",
																handle: "h3",
																stop: function( event, ui ) {
																// IE doesn't register the blur when sorting
																// so trigger focusout handlers to remove .ui-state-focus
																ui.item.children( "h3" ).triggerHandler( "focusout" );
																}
																});
																
																
		$("select").multiselect().multiselectfilter();
		

	} 
function removeChap(ele) {
    var parent = ele.closest('div');
    var head = parent.prev('h3');
    parent.add(head).fadeOut('slow',function(){$(this).remove();});
}
	
</script>




<div class="content-box"><!-- Start Content Box -->

    <div class="content-box-header">

        <h3>Edit Book</h3>

        <div class="clear"></div>

    </div> <!-- End .content-box-header -->

    <div class="content-box-content">

        <form action="" method="post" id="submitFormQuestion">

            <!-- GENERAL -->
            <div class="tab-content id="tab0">

                <!-- ERROR -->
                {{if $errors|@count > 0}}
                <div class="notification error png_bg">
                    <a href="#" class="close"><img src="{{$LAYOUT_HELPER_URL}}admin/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                    <div>
                        {{if $errors.main}}
                        Error: {{$errors.main}}
                        {{else}}
                        Error: Please check following information again
                        {{/if}} 

                    </div>
                </div>
                {{/if}}
                
                <div style="display:none" >
                    {{foreach from=$allCats item=item}}
                         <input idQuestion="{{$item.product_id}}" value="{{$item.fullname}}" />
                    {{/foreach}}
                </div>

                <p>
                    {{foreach from=$allLangs item=item name=langDiv}}
                    <p>
                        <label>Title</label>
                        <image style="vertical-align:middle;" src="{{$BASE_URL}}{{$item.lang_image}}"> {{$item.name}}
                        <br>
                        <input id="title" class="text-input small-input" type="text" style="width:364px;" name="data[{{$item.lang_id}}][title]" value="{{$data[$item.lang_id].title}}" />
                    </p>
                    {{/foreach}}
                </p>

            </div>
				 
            <div>
                <label>Chapter</label>

                <div class="ui-widget" style="width: 328px;float: left ;height: 30px;margin-left:28px">

                    <input class="small-input"  style="width: 285px;height:27px;" id="unit"  name="data[chapter_id]" value="{{$data.chapter_id}}">
                    <button aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" title="Show All Items" tabindex="-1" style="margin-left:-10px;" onclick="showMenu();" type="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></button>

                 </div>
                 <button class="btn" type="button" onclick="addChap()">Add</button>
            </div>
                </br>
            <input type="hidden" class="chapter_titles" name="data[chapter_titles]" />
	
            <div id="accordion">
                {{foreach from=$bookChapters item=item}}
                    <div class="group">
                        <h3>
                        <b class="name_chap">{{$item.name}}</b>
                        <span style="float:right" onclick="removeChap($(this))" class="ui-icon ui-icon-closethick"></span>
                        </h3>
                        <div>
                            <p>{{$item.name}}</p>
                        </div>
                    </div>
                {{/foreach}}
            </div>

            <p>
                <br/>
                <input class="button" onclick="submitBook()" type="button" value="Save" />
            </p>
            <div class="clear"></div><!-- End .clear -->

            </div>  <!-- End GENERAL --> 
        </form>

    </div> <!-- End .content-box-content -->

</div> <!-- End .content-box -->



